<template>
  <AppPage class="bg-[#f5f6fa] h-screen" article-class="" header-class="bg-[#3d8ffd]">
    <template #center>
      <span class="c-white">选择赴馆预约</span>
    </template>
    <div class="pb-70">
      <div class="px-15 pt20 pb-20 bg-theme">
        <div class="c-white text-14">
          该签证需要申请人前往使馆面签，请选择方便前往的赴馆城市及日期，以方便为您预约。
        </div>
      </div>
      <div class="px-15 pt-15 mb-10">
        <div class="bg-white rounded-6 px-12 pb-12">
          <h3 class="pt-10 text-15 pb-6 font-600">请选择赴馆城市</h3>
          <div class="flex items-center justify-between p-10 bg-[#f5f6fa] rounded-6" @click="openArrivalPopup">
            <div>
              <span class="text-13 c-[#000]">
                {{ getCityName(arrival.arrivalCityId)?getCityName(arrival.arrivalCityId):'请选择赴馆城市' }}
              </span>
              <!-- <span class="c-[#f00]">*</span> -->
            </div>
            <div class="flex items-center">
              <Right width="12" class="relative top--1" color="#999" />
            </div>
          </div>
        </div>
      </div>
      <div class="px-15 pt-15 mb-10">
        <div class="bg-white rounded-6 px-12 pb-12">
          <h3 class="pt-10 text-15 pb-6 font-600">请选择赴馆时间</h3>
          <selectToGuanTime ref="_selectToGuanTime" />
          <!-- <div class="flex items-center justify-between p-10 bg-[#f5f6fa] rounded-6" @click="openDateTime">
            <div>
              <span class="text-13 c-[#000]">{{  arrival.arrivalTime?arrival.arrivalTime:'期望赴馆日期' }}</span>
              <span class="c-[#f00]">*</span>
            </div>
            <div class="flex items-center">
              <Right width="12" class="relative top--1" color="#999" />
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="w-full px-15 box-border fixed bottom-0 left-0  bg-white py-10">
      <div class="w-full  box-border">
        <nut-button @click="confirmArrival" :block="true" type="info" color="#3d8ffd">确定</nut-button>
      </div>
    </div>
  </AppPage>
  <datePick ref="selectTravelTime" v-model:value="arrival.arrivalTime" />
  <popUp ref="arrivalCityPopUp" v-model:text="arrival.arrivalCityName" v-model:id="arrival.arrivalCityId" :columns="cityColumns" @confirm="confirmCity" />
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
import { getCityName } from '@/utils/type/common.js'
import { Edit, Plus, Del, Right } from '@nutui/icons-vue';
import { getConsulateCityList } from '@/api/visa'
import { useRoute, useRouter } from 'vue-router'
import datePick from '@/components/datePick/index.vue'
import popUp from '@/components/popUp/index.vue'
import { isEmptyObject } from '@/utils/common/is.js'
import { useVisaStore } from '@/store/modules/visa/index.js'
import selectToGuanTime from '../components/selectToGuanTime.vue'
const route = useRoute()
const router = useRouter()
let arrival = reactive({
  arrivalTime: '',
  arrivalCityName: '',
  arrivalCityId: '',
})


const selectTravelTime = ref('')
const openDateTime = () => {
  selectTravelTime.value.open()
}

// 打开选择赴馆城市弹窗
let cityColumns = ref([])
const arrivalCityPopUp = ref('')
const openArrivalPopup = () => {
  arrivalCityPopUp.value.open()
}
const getCityListFun = async (i) => {
  let country_id = route.query.countryId || 10159
  if (!country_id) return
  const { data, code } = await getConsulateCityList(country_id)
  if (+code !== 200) return
  let embassy_set = data.embassy_set
  let consulateCityList = JSON.parse(window.localStorage.getItem('consulateCityList'))
  consulateCityList.forEach((item, index) => {
    if (embassy_set && embassy_set.length) {
      embassy_set.forEach(val => {
        if (item.city_id === val.city_id) {
          cityColumns.value.push({ value: item.city_id, text: item.name })
        }
      })
    } else {
      cityColumns.value.push({ value: item.city_id, text: item.name })
    }
  })
}
getCityListFun()
//选择赴馆城市
const confirmCity = (item) => {
  // arrival.arrivalCityName = item.selectedOptions[0].text
  // arrival.arrivalCityId = item.selectedOptions[0].id
}
let identityMaterial = !isEmptyObject(useVisaStore().identityMaterial) ? useVisaStore().identityMaterial : (window.localStorage.getItem('identityMaterial') && JSON.parse(window.localStorage.getItem('identityMaterial')))
arrival.arrivalCityId = identityMaterial.arrivalCityId
const _selectToGuanTime = ref('')
const confirmArrival = async () => {
  let result = await _selectToGuanTime.value.validate()
  console.log('%c [ result ]-119', 'font-size:13px; background:#433923; color:#877d67;', _selectToGuanTime.value.getList())
  if (result) {
    let selectToGuanTime = _selectToGuanTime.value.getList()
    if (selectToGuanTime.date_choice === 0) {
      // date_choice 时间种类，other_date，preferred_date：时间集合
      identityMaterial.date_choice = selectToGuanTime.date_choice
      identityMaterial.other_date = ''
      identityMaterial.preferred_date = selectToGuanTime.list.map(item => {
        return { date: item.date, period: item.period }
      })
    } else if (selectToGuanTime.date_choice === 1) {
      identityMaterial.date_choice = selectToGuanTime.date_choice
      identityMaterial.other_date = ''
      identityMaterial.preferred_date = []
    } else if (selectToGuanTime.date_choice === 2) {
      identityMaterial.date_choice = selectToGuanTime.date_choice
      identityMaterial.other_date = selectToGuanTime.other_date
      identityMaterial.preferred_date = []
    }
    identityMaterial.arrivalCityId = arrival.arrivalCityId
    // identityMaterial.arrivalCityName = arrival.arrivalCityName
    useVisaStore().setIdentityMaterial(identityMaterial)
    window.localStorage.setItem('identityMaterial', JSON.stringify(identityMaterial))
    router.push({ path: '/materialUpload' })
  }
}
onMounted(async () => {

})
</script>
<style scoped>
.card-tabs .n-tabs-nav--bar-type {
  padding-left: 4px;
}
</style>
<style lang="scss" scoped>
.city {
  line-height: 32px;
  border: 1px solid #ddd;
}
.city.active {
  line-height: 32px;
  border: 1px solid #f00;
}
</style>